<template>
<el-main>
  <el-form :inline="false" :model="vo":rules="rules" ref="ruleForm" class="demo-ruleForm">
    <el-form-item label="合同标题" prop="title">
      <el-input  v-model="vo.title" placeholder="合同标题"></el-input>
    </el-form-item>
    <el-form-item label="合同内容" prop="reason">
      <el-input  v-model="vo.reason" placeholder="合同原因"></el-input>
    </el-form-item>
    <el-form-item label="合同金额" prop="money">
      <el-input  v-model="vo.money" placeholder="合同金额"></el-input>
    </el-form-item>
    <el-form-item label="合同附件" prop="day">
      <uploader :options="options" class="uploader-example"
                @file-added="onFileAdded">
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <p>Drop files here to upload or</p>
          <uploader-btn>select files</uploader-btn>
          <uploader-btn>select images</uploader-btn>
          <uploader-btn :directory="true">select folder</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
    </el-form-item>
    <el-form-item label="开始时间" prop="starttime">
      <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="vo.starttime" style="width: 100%;"></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间" prop="endtime">
      <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="vo.endtime" style="width: 100%;"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="add">添加</el-button>
    </el-form-item>
  </el-form>
</el-main>
</template>

<script>
import SparkMD5 from 'spark-md5';

export default {
  name: "Add",
  data() {
    return{
      vo:{},
      rules: {
        title: [ {required: true, message: '请输入合同标题', trigger: 'blur'}],
        reason: [ {required: true, message: '请输入合同标题', trigger: 'blur'}],
        starttime: [ {required: true, message: '请输入合同标题', trigger: 'blur'}],
        endtime: [ {required: true, message: '请输入合同标题', trigger: 'blur'}],
        money: [ {required: true, message: '请输入合同金额', trigger: 'blur'}]
      },
      options: {
        target: 'http://localhost:81/apply/postFileUpload', // 目标上传 URL
        chunkSize: '2048000',   //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,  //最大自动失败重试上传次数
        testChunks: false,     //是否开启服务器分片校验
      }
    }
  },
  methods:{
    onFileAdded(file) {
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    },
    add() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.axios.post("http://localhost:81/apply/save", this.vo).then(
              res => {
                if (res.data.code === 200) {
                  this.$message.success("添加成功");
                  this.$router.replace("/list")
                } else {
                  this.$message.error("添加失败");
                }
              }
          );
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
  .el-main{
    margin-left: 30%;
    width: 500px;
  }
</style>
